<template>
  <div>
    <el-upload
      list-type="picture-card"
      action="#"
      :limit="1"
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
      :file-list="filelist"
      :class="{ display : fileComputed }"
    >
      <!-- :http-request="upload" 覆盖默认的上传行为，可以自定义上传的实现 所以我们定义了upload函数，采用腾讯云的方式上传图片-->
      <!-- :class="{ class类名 : 布尔值 }" -->
      <!-- :limit最大允许上传个数 action为必填属性 :on-preview属性点击预览时触发 使用 list-type 属性来设置文件列表的样式。-->
      <!-- :file-list是上传的文件列表 可以绑定到上传组件上，让上传组件来显示 -->
      <i class="el-icon-plus" />
    </el-upload>

    <el-progress v-if="showProgress" :text-inside="true" :stroke-width="24" :percentage="Percent" status="success" style="width:180px" />

    <el-dialog :visible.sync="showDialog" title="图片展示">
      <img :src="ImgSrc" alt="" style="width:100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 引入腾讯云cos包
const cos = new COS({ // 实例化cos对象 得到cos对象 和面上传需要用到这个对象
  SecretId: 'AKID70e6hrSRLRxviIw2DBxmtoV1JNCpKbmB', // 身份识别ID
  SecretKey: '980hBqYSG1d08AxYv7FAuiKYZS5TbaNu' // 身份密钥
})
export default {
  data() {
    return {
      ImgSrc: '',
      showDialog: false,
      // filelist: [{url:'图片地址'}],
      filelist: [],
      currentFileId: null, // 记录当前正在上传图片的uid
      Percent: 0,
      showProgress: false
    }
  },
  computed: {
    fileComputed() { // 动态监听了data中filelist数组 如果为1 说明已经有图片上传在了 就需要让 +号 隐藏 不能再继续上传
      return this.filelist.length === 1 // 如果条件成立 则该计算属性肯定返回的是true
    }
  },
  methods: {
    // 点击 +号 触发
    preview(file) { // :on-preview="preview"  on-preview点击文件列表中已上传的文件时的钩子 file有url地址 可以打印出来看看
      // console.log(file)  图片信息
      this.showDialog = true
      this.ImgSrc = file.url
    },

    // 由于点击删除 虽然页面上没有了图片 但应该将 + 号显示出来 我们的逻辑是：有图片没+号，没图片有+号
    // 现在没图片也没有+号 说明 this.filelist.length依然等于1 这样display类名就发挥了作用 隐藏了+号  所以此刻需要想办法把 this.filelist.length等于0
    // 点击 删除的那个标志 触发
    handleRemove(file, fileList) {
      // console.log(file) // 这是被移除的图片的信息
      // console.log(fileList) // 打印会发现这是个空数组
      this.filelist = fileList
    },

    // 修改(添加)文件时触发 会连续触发两次
    changeFile(file, fileList) {
      this.filelist = fileList
      // console.log(this.filelist)
    },

    beforeUpload(file) { // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      // console.log(file) file包含了图片的详细信息，图片大小，类型，名字等等
      // 需要用这些信息对上传的图片进行简单校验 大小和类型搞个限制
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.some(item => item === file.type)) { // 如果types中类型符合file的类型 则通过。这里取了反，则不通过
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false
      }
      if (file.size > 5 * 1024 * 1024) { // 检查大小 设置最大为5M file.siza的大小单位为b  1M=1024kb=1024*1024b
        this.$message.error('图片大小最大不能超过5M')
        return false
      }
      this.currentFileId = file.uid
      this.showProgress = true // 准备上传 开启进度条效果
      return true // 校验完成后一定要 return true
    },

    upload(params) { // 进行上传操作
      // console.log(params.file) // params.file是我们需要上传文件的信息对象
      // 上传到腾讯云服务器  上传方法见 腾讯云文档地址
      cos.putObject({ // cos是在最上面创建的COS实例对象
        Bucket: 'djxjh-1305685931', /* 必须 存储桶名称*/
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: params.file.name, // 文件名
        Body: params.file, // 要上传的文件对象
        StorageClass: 'STANDARD', // 上传的文件类型 直接默认 标准模式 固定写法
        onProgress: (params) => { // 为进度条属性为准备的
          this.Percent = params.percent * 100
        }
      }, (err, data) => {
        console.log(err)
        if (data.statusCode === 200) {
          // 此时说明文件上传成功  要获取成功的返回地址
          // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
          // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
          // 需要知道当前上传成功的是哪一张图片
          this.filelist = this.filelist.map(item => {
            // 去找谁的uid等于刚刚记录下来的id
            if (item.uid === this.currentFileId) {
              console.log('你吗死了？')
              return { url: 'http://' + data.Location, upload: true }
              // upload 为true 表示这张图片已经上传完毕 这个属性要为我们后期应用的时候做标记
              // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
            }
            return item
          })
          this.showProgress = false // 上传成功 关闭进度条
          this.Percent = 0 // 重置百分比
        }
      })
    }
  }

}
</script>

<style>
.display .el-upload--picture-card {
  display: none;
}
</style>
